<template>
	<view class="pages">
		
		<view class="timebox" style="background-color: #fff;">
			
			<view class="inp">
				 <view class=""> 
					<text>￥</text>
					<input type="number" v-model="money" placeholder="自定义充值金额" @focus="clearpayid" /> 
				 </view>
				  
			</view>
			
			<view class="timetitile">
				充值套餐
			</view>
			<view class="time">
				<view v-for="(item,index) in list" :key="index" 
				:class="payInfo.id==item.id ? 'activetime' : ''"  @click="changetime(item)">
					<view class="price">
						<text>{{item.payPrice | hidezero}}</text> 元
					</view>
					<view class="give_price">
						赠送{{item.bonusPrice | hidezero}} 元
					</view>
				</view>
			</view>
			 
		</view>
		<view class="timebox">
			<view class="txt">
				<rich-text :nodes="info"></rich-text>
 				
			</view>
			 
		</view>
		
		
		<view class="footer">
			<view class="btn" @click="topay">
				确认充值
			</view>
		</view>
	</view>
</template>

<script>
	import {noticeInfoAPI,noticelistAPI} from "@/api/appointment.js"
	import {walletListAPI,createrechargeAPI} from "@/api/user.js"
	import {pay} from "@/utils/pay.js"
	export default {
		data() {
			return {
				list:[],
				info: '',
				payInfo:{
					id:''
				},
				money:""
			}
		},
		created() {
			this.getdata()
			this.noticeInfo()
		},
		filters:{
			hidezero(price){
				return parseFloat(price)
			}
		},
		methods: {
			noticeInfo(){
				noticeInfoAPI({id:'28'}).then(res=>{
					this.info=res.content;
					console.log("1111", this.info)
				})
			},
			clearpayid(){
				this.$set(this.payInfo,"id","")
			},
			topay(){
				let data={}
				// 套餐
				if(this.payInfo.id){
					data={
						packageId:this.payInfo.id,
						payPrice:this.payInfo.payPrice
					}
				}else{
				// 非套餐
					if(this.money==""){
						return uni.showToast({ title:'请选择充值金额', icon:'none'})
					}else{
						// 看看和套餐钱是否一致
						let payinfo= this.list.find(item=>item.payPrice==this.money)
						data= payinfo ? {
							packageId:payInfo.id,
							payPrice:payInfo.payPrice
						} : {
							payPrice:this.money
						}
					}
				}
				
				createrechargeAPI(data).then(res=>{
					pay({
						id:res.payOrderId,
						channelCode:"wx_lite",
						channelExtras:{
							openid:uni.getStorageSync("openid")
						}
					}).then(result=>{
						console.log(result)
						uni.showToast({
							title:'充值成功'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					})
					
				})
			},
			changetime(item){
				this.payInfo=item	
				this.money=""
			},
			getdata(){
				walletListAPI({
					pageNo:1,pageSize:20
				}).then(res=>{
					this.list=res.list
					// this.bag_id=res[0].id
				})
			}
		}
	}
</script>

<style  scoped lang="scss">
.pages{
	padding:20rpx 20rpx 100rpx;
	background: #F8F8F8;
	background-size: 100%;
	min-height: 100vh;
}
.timebox{
	padding: 20rpx;
	border-radius: 20rpx;
	.inp{
		border-bottom: 1rpx solid #EEEEEE;
		padding: 20rpx;
		view{
			padding:   20rpx;
			display: flex;
			border-radius: 8rpx;
			border: 2rpx solid #277EEF;
			align-items: center;
			text{
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				 
			}
			input{
				flex: 1;
				line-height: 60rpx;
				height: 60rpx;
				padding-left: 20rpx;
			}
		}
		
	}
	>view{
		line-height: 60rpx;
		color: #56616B;
	}
	.timetitile{
		font-size: 28rpx;
		font-weight: bold;
		color: #2A2A37;
	}
	.txt{
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 38rpx;
	}
	.time{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
		>view{
			width: 180rpx;
			padding:30rpx 15rpx;
			margin: 20rpx;
			background-color: #EFF7FF;
			border: 1px solid #EFF7FF;
			border-radius: 20rpx;
			.price{
				text-align: center;
				color: #277EEF;
				font-size: 24rpx;
				text{
					color: #277EEF;
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 3rpx;
				}
			}
			.give_price{
				text-align: center;
				color: #665E53;
				font-size: 24rpx;
			}
		}
		.activetime{
			border: 1px solid #277EEF;
			// background-color: #EFF7FF;
		}
	}
}
</style>
